<!DOCTYPE html>
<html>
	<head>
		<title>Chat video with Touch Me</title>
		<meta charset="UTF-8">
		<link rel="stylesheet" type="text/css" href="css/styles.css">
		<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
	</head>

	<body>
		<!-- Logo -->
		<img id="logo" src="images/logo.png" alt="Logo" title="Touch Me">

		<!-- Sign In, Sign Up -->
		<ul>
			<li><p class="nav-home">Sign In</p>
				<span class="linein"></span>
				<div id="signIn" class="box">
					<form id="sign-in" class="home-form">
						<p>Username:</p>
						<input type="text" class="text" name="userName" placeholder="Username">
						<p>Password:</p>
						<input type="text" class="text" name="userName" placeholder="Password">
						<input type="submit" value="Sign In">

						<p class="sign-on">Sign In with?</p>
						<button class="face"></button>
						<button class="google"></button><br>

						<a href="#" class="forgot">Forgot your password?</a>
					</form>
				</div>
			</li>	
			<li><p class="nav-home">Sign Up</p>
				<span class="linein"></span>
				<div id="signUp" class="box">
					<form id="sign-up" class="home-form">
						<p>Username:</p>
						<input type="text" class="text" name="userName" placeholder="Username">
						<p>Email:</p>
						<input type="text" class="text" name="email" placeholder="example@example.com">
						<p>Password:</p>
						<input type="text" class="text" name="password" placeholder="Password">						
						<p>Confirm your password:</p>
						<input type="text" class="text" name="rePassword" placeholder="Confirm your password">
						<input type="submit" value="Sign Up">

						<p class="sign-on">Sign Up with?</p>
						<button class="face"></button>
						<button class="google"></button>
					</form>
				</div>
			</li>
		</ul>

		<h1 class="h1home">Easy to communicate with your friends</h1>
		<h2 class="h2home">Let's call</h2>
		<img src="images/presentation.png" alt="Touch Me" class="imghome">
		<p class="design">Design by Jacken (ThangKQ)</p>
	</body>
</html>

<!-- Javascript -->
<script type="text/javascript">
	$(document).ready(function() {
		
		$('li').click(function() {
			$('.box').hide();
			$(this).children().show();

			$('li').removeClass('active');
			$(this).addClass('active');
		});

	});
</script>